import React, {useMemo, useRef} from 'react';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

const StockChart = ({
                        trendData = {},
                               sysmbol
                           }) => {
    const chartContainerRef = useRef(null); // 用于全屏切换的容器引用
    const recentDaysList = Array.isArray(trendData[sysmbol]) ? trendData[sysmbol].map(item => item[0]) : [];


    // 配置数据 当天没有数据的值设为0
    const formatData = useMemo(() => {
        let newData = {};

        recentDaysList.forEach(() => {
            if (trendData && Object.keys(trendData).length === 0) {
                return {};
            }
            newData.btc_open = trendData[sysmbol].map(item => parseFloat(item[1]));
            newData.btc_high = trendData[sysmbol].map(item => parseFloat(item[2]));
            newData.btc_low = trendData[sysmbol].map(item => parseFloat(item[3]));
            newData.btc_close = trendData[sysmbol].map(item => parseFloat(item[4]));
            newData.btc_volume = trendData[sysmbol].map(item => parseFloat(item[5]));
        });
        console.log(newData.okx_avg_price)
        console.log(newData.okx_total_amount_difference)
        return newData;
    }, [trendData]);

    const series = [
         {
            name: ' OPEN',
            data: formatData.btc_open,
             type: 'line',  // Specify that this is a line chart
             yAxis: 1,  // Use the secondary Y-axis

         },
      {
            name: 'HIGH',
            data: formatData.btc_high, // 示例数据，可用 `formatData.binance`
          type: 'line',  // Specify that this is a line chart
          yAxis: 1,  // Use the secondary Y-axis
        },
        {
            name: 'LOW',
            data: formatData.btc_low, // 示例数据，可用 `formatData.binance`
            type: 'line',  // Specify that this is a line chart
            yAxis: 1,  // Use the secondary Y-axis
        },
        {
            name: 'CLOSE',
            data: formatData.btc_close, // 示例数据，可用 `formatData.binance`
            type: 'line',  // Specify that this is a line chart
            yAxis: 1,  // Use the secondary Y-axis
        },
         {
            name: 'VOLUME',
            data: formatData.btc_volume, // 示例数据，可用 `formatData.binance`
            stack: 'binance_amount'
        },
    ].filter(Boolean); // 去除空值

    const options = {
        chart: {
            type: 'column',
            style: {
                fontSize: '1em'
            },
        },
        title: {
            text: sysmbol,
            align: 'left'
        },
        yAxis: [
            {
                // 主 Y 轴，用于计数
                title: {
                    text: '奖牌数量',
                },
                allowDecimals: false, // 禁止小数
            },
            {
                // 次级 Y 轴，用于价格
                title: {
                    text: '价格',
                },
                opposite: true, // 轴放置在右侧
                allowDecimals: true, // 允许小数
            },
        ],
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle'
        },
        xAxis: {
            categories: recentDaysList.map(item => {
                return  new Date(item).toLocaleString();
            })
        },
        series: series,
        tooltip: {
            headerFormat: '<b>{point.x}</b><br>', // 显示时间（X轴）
            pointFormat: '{series.name}: {point.y}<br>', // 显示每个数据点的值
            shared: true, // 显示多个系列的数据
            crosshairs: true, // 显示十字准线
        },
        plotOptions: {
            column: {
                stacking: 'normal', // 启用堆叠
                dataLabels: {
                    enabled: true
                }
            }
        },
        responsive: {
            rules: [{
                condition: {
                    maxWidth: 100
                },
                chartOptions: {
                    legend: {
                        layout: 'horizontal',
                        align: 'center',
                        verticalAlign: 'bottom'
                    }
                }
            }]
        },
        credits: {
            enabled: false
        }
    };

    return (
        <div ref={chartContainerRef} style={{ cursor: 'pointer' }}>
            <HighchartsReact
                highcharts={Highcharts}
                options={options}
            />
        </div>
    );
};

export default StockChart;
